<script setup>
import { useRouter } from 'vue-router'
import click from '@/services/clickSound'
import { onMounted } from 'vue'
onMounted(() => {
  console.log('choose-mode')
})
const modes = [
  { tittle: '2v2模式', url: '2v2model.jpg' },
  { tittle: '5人身份模式', url: '1v4model.jpg' }
]

const router = useRouter()

async function handleChoose(mode, index) {
  try { await click.play() } catch (_) {}
  console.log('选择模式：', mode.tittle, 'index=', index)
  if (index === 0) {
    router.push({ path: '/pre-create-room/choose-friend-2v2', query: { model: 'create2v2' } });
    console.log('跳转：', router.currentRoute.value.fullPath)
  }
}

</script>

<template>
  <div class="choose-mode">
    <div class="grid">
      <div v-for="(m, idx) in modes" :key="idx" class="card clickable" @click="handleChoose(m, idx)">
        <img class="bg" :src="`http://117.72.17.45:5500/data/icons/${m.url}`" :alt="m.tittle" />
        <div class="overlay">{{ m.tittle }}</div>
      </div>
    </div>
  </div>
  
</template>

<style scoped>
.choose-mode {
  width: 100%;
  height: 90%;
  background: rgba(255, 255, 255, 0.6);
  border-radius: 12px;
  padding: 16px;
  box-sizing: border-box;
}
.grid {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column; /* 竖直排列 */
  gap: 16px;
}
.card {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  background: rgba(255,255,255,0.8);
  height: 140px; /* 适当高度以形成竖直卡片 */
}
.clickable { cursor: pointer; user-select: none; }
.bg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  padding: 8px 10px;
  background: linear-gradient(180deg, rgba(0,0,0,0.45), rgba(0,0,0,0));
  color: #fff;
  font-weight: 700;
  text-shadow: 0 1px 2px rgba(0,0,0,0.6);
}
</style>


